<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
          href="css/style.css"/>
</head>

<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader"><p>2019-07-11<br/></p></div>
            <div id="topheader"><h1 id="title">MAIN</h1></div>
            <div id="navigation"></div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>添加用户</h1>
            <form>
                <table cellpadding="0" cellspacing="0" border="0" class="form_table">
                    <tr>
                        <td valign="middle" align="right">用户名</td>
                        <td valign="middle" align="left">
                            <input id="username" type="text" class="logininput choice"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">密码</td>
                        <td valign="middle" align="left">
                            <input id="password" type="password" class="logininput"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">姓名</td>
                        <td valign="middle" align="left">
                            <input id="name" type="text" class="logininput" name="pwd"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">电话</td>
                        <td valign="middle" align="left">
                            <input id="phone" type="text" class="logininput"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">性别</td>
                        <td valign="middle" align="left">
                            <input type="radio" class="logininput" name="sex" value="男" checked/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" class="logininput" name="sex" value="女"/>女
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">账号类型</td>
                        <td valign="middle" align="left">
                            <input type="radio" class="logininput" name="status" value="1" onclick="changeStatus()"/>管理员&nbsp;&nbsp;
                            <input type="radio" class="logininput" name="status" value="2" checked onclick="changeStatus()" />运动员
                        </td>
                    </tr>
                    <tr class="choice">
                        <td valign="middle" align="right">学号</td>
                        <td valign="middle" align="left">
                            <input id="stu_username" type="text" class="logininput"/>
                        </td>
                    </tr>
                    <tr class="choice">
                        <td valign="middle" align="right">学院</td>
                        <td valign="middle" align="left">
                            <input type="text" class="logininput" id="college"/>
                        </td>
                    </tr>
                    <tr class="choice">
                        <td valign="middle" align="right">专业</td>
                        <td valign="middle" align="left">
                            <input type="text" class="logininput" id="major"/>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" onclick="register()" class="button" value="确定"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">教务处@qq.com</div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

    changeStatus();

    // 改变注册项目填写状态
    function changeStatus() {
        let status = $("input[name=status]:checked");
        let items  = $(".choice");

        // 是管理员
        if (status.val() == 1) {
            // 这里遍历得到的是dom对象
            $(items[0]).removeAttr("disabled").css("cursor", "").val("");
            for (let i = 1; i < items.length; i++) {
                items[i].style.display = "none";
            }
        }
        // 是运动员
        else {
            $(items[0]).attr("disabled", true).css("cursor", "not-allowed").val("学生登录账号为学生的学号");
            for (let i = 1; i < items.length; i++) {
                items[i].style.display = "";
            }
        }

    }

    // 注册
    function register() {
        // 判断注册学生还是管理员
        if ($("input[name=status]:checked").val() == 1) adminRegister();
        else studentRegister();
    }

    function studentRegister() {
        $.post({
            url: "student/register",
            data: {
                "username": $("#stu_username").val(),
                "password": $("#password").val(),
                "name"    : $("#name").val(),
                "phone"   : $("#phone").val(),
                "sex"     : $("input[name=sex]:checked").val(),
                "college" : $("#college").val(),
                "major"   : $("#major").val()
            }, success(data) {
                // 注册成功
                if (data.code == 200) {
                    alert("注册成功，跳转到报名页面");
                    window.location.href = "login.html";
                } else {
                    alert("注册失败，请检查输入字段");
                }
            }, error(data) {
                alert("请求异常，检查控制台以查看详细信息");
                console.log(data);
            }
        });
    }

    function adminRegister() {
        $.post({
            url: "admin/register",
            data: {
                "username": $("#username").val(),
                "password": $("#password").val(),
                "name"    : $("#name").val(),
                "phone"   : $("#phone").val(),
                "sex"     : $("input[name=sex]:checked").val()
            }, success(data) {
                // 注册成功
                if (data.code == 200) {
                    alert("注册成功，跳转到管理页面");
                    window.location.href = "login.html"
                } else {
                    alert("注册失败，请检查输入字段");
                }
            }, error(data) {
                alert("请求异常，检查控制台以查看详细信息");
                console.log(data);
            }
        });
    }
</script>
</html>
